<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!-- 1.form代表整个表单 action属性表示收集好的数据后提交的地址
     #占位符表示提交到当前页-->
<form action="#">
    <!-- value value属性本来就存在 用来保存控件的值 也可以通过value属性设置输入框的默认值
         type属性表示输入框的类型
         placeholder表示占位符
         name 表示表单域的名称
         readonly 表示只读 只能看 不能改 可以提交数据
         disabled 表示禁用 可以看到数据 但做不了任何操作 不能提交数据
         maxlength 表示输入框输入内容的最大长度
         checked 表示选中状态

     2.input的type值控制输入框的类型
         text 普通文本输入框
         radio 单选
         checkbox 多选
         submit 提交
         reset 重置按钮
         button 普通按钮
         date 日期
         color 颜色
         range 范围
         file 文件-->
    用户名只读:<label for="username">
    <input type="text" id="username" placeholder="请输入用户名" readonly value="admin">
</label><br>
    密码禁用:<input type="password" name="password" placeholder="请输入密码" disabled value="123456"><br>
    <label for="email">邮箱:
        <input type="email" id="email" placeholder="请输入邮箱" value="2679459676@qq.com">
    </label><br>
    爱好:
    <label for="hobby">
        <input type="checkbox" id="hobby" value="看书">
        看书
    </label>
    <input type="checkbox" name="hobby" value="看电影">看电影
    <input type="checkbox" name="hobby" value="打游戏">打游戏
    <input type="checkbox" name="hobby" value="看小说" checked>看小说
    <input type="checkbox" name="hobby" value="看音乐" checked>看音乐
    <br>
    <hr>
    nickname:<input type="text" name="nickname" placeholder="please input your nickname" value="YuWu" maxlength="6"><br>
    <!-- 单选必须设置相同的name分到同一组 并且需要设置value值 否则提交的是on -->
    <input type="radio" name="gender" value="男">男
    <input type="radio" name="gender" value="女">女
    <br>
    生日:<input type="date" name="birthday" value="2020-01-01"><br>
    颜色:<input type="color" name="color"><br>
    缩放:<input type="range" name="range"><br>
    文件:<input type="file" name="file">
    <br>
    <hr>
    <textarea name="content" cols="30" rows="10" placeholder="请输入内容">
        默认内容
    </textarea><br>
    城市:
    <select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="shenzhen">深圳</option>
    </select>
    <hr>
    <input type="submit" value="点我提交">
    <input type="reset" value="重置">
    <input type="button" value="点我提示">
    <button>普通按钮</button>
    <hr>
    <input type="submit">
</form>
</body>
</html>